<template>
	<div class="recmv">
		<p class="rec">相关推荐</p>
		<div class="videoAndDesc" v-for="(item,index) in recmv">
			<video width="100" height="60" :poster="item.picUrl" :src="playurl[index]" ></video>
			<div class="desc">
				<p>{{item.copywriter}}</p>
				<p>{{item.name}}</p>
			</div>
		</div>
		
	</div>
</template>

<script>
	import axios from "axios"
	export default {
		name:"recmv",
		data(){
			return {
				baseurl:"http://netease.bluej.cn",
				recmv:"",
				recmvid:"",
				playurl:[]
			}
		},
		created(){
			var that = this
			axios.get(that.baseurl+"/personalized/mv")
			.then(function(res){
				console.log(res);
				that.recmv = res.data.result;
				console.log(that.recmv);
				var recid = [];
				for(var i=0;i<that.recmv.length;i++){
					recid.push(that.recmv[i].id);
					that.getPlayurl(that.recmv[i].id);
					that.recmvid=recid;
					
				}
			})
		},
		methods:{
			getPlayurl(ids){
				var that =this;
				var purl=[]
				axios.get(that.baseurl+"/mv?mvid="+ids)
				.then(function(res){
					console.log(res.data.data.brs[240]);
					that.playurl.push(res.data.data.brs[240]);
					console.log(that.playurl)
				})
			}
		}
		
	}
	
</script>

<style lang="scss" scoped="">
	.recmv{
		width: 100%;
		.rec{
			width: 100%;
			background: gainsboro;
			font-size: 12px;
			
		}
		.videoAndDesc{
			width: 95%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			padding: 10px;
			.desc{
				padding-left:8px;
				p{
					font-size: 12px;
					text-align: left;
					color:#000; 
					&:nth-child(2){
						font-size: 12px;
						transform: scale(0.9);
						text-align: left;
						margin-top: 7px;
						margin-left: -9px;
					
					}
				}
			}
		}
	}
</style>